<template>
  <div class="pages">
    <div class="u-pg">
      <a href="javascript:;" :class="['p-btn', 'p-prev', this.curPage == 1? 'disable': '']" @click="prevP">上一页</a>
      <a href="javascript:;" :class="['z-pgn', this.curPage == 1 ? 'z-select' : '']" @click="changeP(1)">1</a>
      <span v-if="this.curPage > 5" href="javascript:;" class="z-dots">...</span>
      <a href="javascript:;" :class="['z-pgn', this.curPage == item? 'z-select':'']" v-for="item in midPagesList"
        :key="item" @click="changeP(item)">{{item}}</a>
      <span v-if="this.curPage <= (this.totalPage - 4)" href="javascript:;" class="z-dots">...</span>
      <a href="javascript:;" :class="['z-pgn', this.curPage == this.totalPage ? 'z-select' : '']"
        @click="changeP(this.totalPage)">{{this.totalPage}}</a>
      <a href="javascript:;" :class="['p-btn', 'p-next', this.curPage == this.totalPage? 'disable': '']"
        @click="nextP">下一页</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page',
  props: {
    curPage: {
      type: Number,
      default: 1
    }, totalPage: {
      type: Number,
      default: 1
    }, midPagesList: {
      type: Array,
      default: () => { return [] }
    }
  },
  methods: {
    prevP () {
      this.$emit('prev')
    },
    nextP () {
      this.$emit('next')
    },
    changeP (val) {
      this.$emit('changeP', val)
    },
  },
}
</script>

<style>
</style>